<template>
  <header>
    <div class="header-return">
      <span class="iconfont iconzuojiantou"></span>
    </div>
    <div class="header-search">
      <span class="iconfont iconsearch"></span>输入城市/景点/游玩主题
    </div>
    <div class="header-city">
      <router-link to="/city">
      {{ city }}<span class="iconfont iconsanjiao_xia"></span>
      </router-link>
    </div>
  </header>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style scoped lang="stylus">
  a
    color: #fff;
  header{
    width: 100%;
    line-height: .88rem;
    display: flex;
    font-size: .32rem;
    background-color: red;
    color: #fff;
  }
.header-return,.header-city{
  padding: 0 .2rem;
}
  .header-search {
    flex: 1;
    height: .6rem;
    line-height: .6rem;
    background-color: #fff;
    margin-top: .14rem;
    border-radius: .07rem;
    color: #e4e7ea;
    font-size: .28rem;
    padding: 0 .2rem;
  }
  .header-city {
    font-size: .28rem;
  }
</style>
